<template>
    <view :style="[pageStyle, themeVars]">
        <cl-header
            title="cl-list 演示"
            :left-show="true"
            :background-color="headerBgColor"
            :text-color="headerTextColor"
            @goback="() => uni.navigateBack()"
        />

        <view class="hero">
            <view class="hero-title" :style="textPrimaryStyle">cl-list</view>
            <view class="hero-sub" :style="textSecondaryStyle">分页加载、下拉刷新、触底加载</view>
        </view>

        <view class="section" :style="surfaceCardStyle">
            <view class="title" :style="textPrimaryStyle">说明</view>
            <text :style="textSecondaryStyle">演示分页加载与下拉刷新。</text>
        </view>

        <view class="section" :style="surfaceCardStyle">
            <cl-list ref="listRef" :options="{}" :on-form-search="doSearch">
                <template #default="{ row }">
                    <view class="item" :style="surfaceCardStyle">
                        <view class="item-header">
                            <text class="idx">#{{ row.globalIndex }}</text>
                            <text class="tit" :style="textPrimaryStyle">{{ row.title }}</text>
                        </view>
                        <text class="desc" :style="textSecondaryStyle">{{ row.description }}</text>
                    </view>
                </template>
            </cl-list>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useThemeStyles } from '@/composables/useThemeStyles/index'
import { useTheme } from '@/composables/useTheme'
const { pageStyle, surfaceCardStyle, textPrimaryStyle, textSecondaryStyle, headerBgColor, headerTextColor } = useThemeStyles()
const { getThemeVars } = useTheme()
const themeVars = computed(() => getThemeVars())
const listRef = ref()

const mock = Array.from({ length: 60 }, (_, i) => ({
    id: i + 1,
    globalIndex: i + 1,
    title: '项目 ' + (i + 1),
    description: '这里是第 ' + (i + 1) + ' 项的描述'
}))

const doSearch = (formData: { page: number; limit: number }, onSuccess: Function) => {
    setTimeout(() => {
        const { page, limit } = formData
        const start = (page - 1) * limit
        const end = start + limit
        onSuccess({ data: { data: mock.slice(start, end), total: mock.length } })
    }, 400)
}
</script>

<style scoped lang="scss">
@import '@/styles/theme.scss';

.hero {
    padding: $spacing-lg $spacing-lg 0;
}

.hero-title {
    font-size: $font-size-xxl;
    font-weight: $font-weight-bold;
}

.hero-sub {
    color: var(--theme-text-secondary, $text-secondary);
    margin-top: 6rpx;
}

.section {
    @include card-style($card-shadow, $border-radius-large);
    margin: $spacing-lg;
    padding: $spacing-xl;
}

.item {
    @include card-style($card-shadow, $border-radius-medium);
    padding: $spacing-lg;
    margin-bottom: $spacing-md;
}

.item-header {
    display: flex;
    align-items: center;
    gap: $spacing-sm;
    margin-bottom: $spacing-xs;
}

.idx {
    background: var(--theme-gradient, $primary-gradient);
    color: #fff;
    padding: 6rpx 12rpx;
    border-radius: $border-radius-small;
}

.tit {
    font-weight: $font-weight-bold;
}

.desc {
    display: block;
    margin-top: $spacing-xs;
    color: var(--theme-text-secondary, $text-secondary);
}
</style>
